<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>瀑布流</title>
</head>
<style>
  img {
    width: 220px;
    display: block;
  }

  .box{
    position: relative;
    width: 90%;
    margin: 0 auto;
  }

  .item {
    box-shadow: 2px 2px 2px #999;
    position: absolute;
  }
</style>

<body>
  <div id="box">
    <div class="item"><img src="./img/bg.jpg" alt="" /></div>
    <div class="item"><img src="./img/birthday.png" alt="" /></div>
    <div class="item"><img src="./img/img1.jpg" alt="" /></div>
    <div class="item"><img src="./img/img2.jpg" alt="" /></div>
    <div class="item"><img src="./img/img3.jpg" alt="" /></div>
    <div class="item"><img src="./img/img4.jpg" alt="" /></div>
    <div class="item"><img src="./img/img5.jpg" alt="" /></div>
    <div class="item"><img src="./img/img6.jpg" alt="" /></div>
    <div class="item"><img src="./img/img7.jpg" alt="" /></div>
    <div class="item"><img src="./img/img8.jpg" alt="" /></div>
    <div class="item"><img src="./img/birthday.png" alt="" /></div>
    <div class="item"><img src="./img/img2.jpg" alt="" /></div>
    <div class="item"><img src="./img/img8.jpg" alt="" /></div>
    <div class="item"><img src="./img/bg.jpg" alt="" /></div>
    <div class="item"><img src="./img/img1.jpg" alt="" /></div>
    <div class="item"><img src="./img/img4.jpg" alt="" /></div>
    <div class="item"><img src="./img/img6.jpg" alt="" /></div>
  </div>
  <!-- <script src="../js/jquery-1.8.3.js"></script>
    <script>
      function waterFall() {
        var containerWidth = $(".container").width();
        var box = $(".box");
        var boxWidth = box.outerWidth();
        var cols = 5;
        var heightArr = [];
        $.each(box, function (index, item) {
          var boxHeight = $(item).outerHeight();
          if (index < cols) {
            heightArr[index] = boxHeight;
            $(item).css({
              top: 0,
            });
            if ((index + 1) % cols == 1) {
              $(item).css({ left: 0 });
            } else {
              $(item).css({ left: index * (232 + 10) + "px" });
            }
          } else {
            var minBoxHeight = Math.min(...heightArr);
            var minBoxIndex = $.inArray(minBoxHeight, heightArr);
            $(item).css({
              left: (boxWidth + 10) * minBoxIndex + "px",
              top: minBoxHeight + 10 + "px",
            });
            heightArr[minBoxIndex] += minBoxHeight + 10;
          }
        });
      }
      waterFall();
    </script> -->
  <script>
    var box = document.getElementById('box');
    var items = box.children;
    // 定义每一列之间的间隙 为10像素
    var gap = 10;

    window.onload = function () {
      // 一进来就调用一次
      waterFall();
      // 封装成一个函数
      function waterFall() {
        // 1- 确定列数  = 页面的宽度 / 图片的宽度
        var pageWidth = getClient().width;
        var itemWidth = items[0].offsetWidth;
        var columns = parseInt(pageWidth / (itemWidth + gap));
        // if(pageWidth % (itemWidth + gap) >= itemWidth) {
        //   columns++;
        // }
        var arr = [];
        for (var i = 0; i < items.length; i++) {
          if (i < columns) {
            // 2- 确定第一行
            items[i].style.top = 0;
            items[i].style.left = (itemWidth + gap) * i + 'px';
            arr.push(items[i].offsetHeight);

          } else {
            // 其他行
            // 3- 找到数组中最小高度  和 它的索引
            // var minHeight = arr[0];
            var minHeight = Math.min(...arr);
            // var index = 0;
            var index = arr.indexOf(minHeight);
            // for (var j = 0; j < arr.length; j++) {
            //   if (minHeight > arr[j]) {
            //     minHeight = arr[j];
            //     index = j;
            //   }
            // }
            // 4- 设置下一行的第一个盒子位置
            // top值就是最小列的高度 + gap
            items[i].style.top = arr[index] + gap + 'px';
            // left值就是最小列距离左边的距离
            items[i].style.left = items[index].offsetLeft + 'px';

            // 5- 修改最小列的高度 
            // 最小列的高度 = 当前自己的高度 + 拼接过来的高度 + 间隙的高度
            arr[index] = arr[index] + items[i].offsetHeight + gap;
          }
        }
      }
      // 页面尺寸改变时实时触发
      window.onresize = function () {
        waterFall();
      };
      // 当加载到第30张的时候
      window.onscroll = function () {
        if (getClient().height + getScrollTop() >= items[items.length - 1].offsetTop) {
          // 模拟 ajax 获取数据    
          var datas = [
            "./img/bg.jpg",
            "./img/birthday.png",
            "./img/img1.jpg"
          ];
          const fragment = document.createDocumentFragment();
          for (var i = 0; i < datas.length; i++) {
            var div = document.createElement("div");
            div.className = "item";
            div.innerHTML = '<img src="' + datas[i] + '" alt="">';
            fragment.appendChild(div);
          }
          box.appendChild(fragment)
          waterFall();
        }

      };
    };

    // clientWidth 处理兼容性
    function getClient() {
      return {
        width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
        height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
      }
    }
    // scrollTop兼容性处理
    function getScrollTop() {
      return window.pageYOffset || document.documentElement.scrollTop;
    }
  </script>
</body>

</html>